<template>
    <div class="app-container">
        <div class="dataListBox">
            <div class="TicketsLeft">
                <Tickets style="width: 1em; height: 1em; margin-right: 8px" />
                <div>数据列表</div>
            </div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="秒杀时间段名称" />

            <el-table-column label="每日开始时间">
                <template #default="scoped">
                    {{ scoped.row.startTime ? dayjs(scoped.row.startTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column label="每日结束时间">
                <template #default="scoped">
                    {{ scoped.row.endTime ? dayjs(scoped.row.endTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
                </template>
            </el-table-column>
            <el-table-column prop="productCount" label="商品数量" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button link type="primary" size="small" @click="shoppingList(row.id)">商品列表</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { dayjs } from 'element-plus';
import * as http from '@/request/http';
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue';
import { Tickets } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// const tableData = reactive<IFlashSessionSelectListR>({
//     id: 0,
//     name: '',
//     status: 1,
//     createTime: '',
//     startTime: '',
//     endTime: '',
//     productCount: 0
// })
const tableData = ref<IFlashSessionListModel[]>([])

http.flashSession.flashSessionSelectList(Number(route.query.flashPromotionId)).then(res => {
    tableData.value = res.data
})
const flashPromotionId = Number(route.query.flashPromotionId)
const shoppingList = (id: number) => {
    router.push(`flashProductRelation?flashPromotionId=${flashPromotionId}&flashPromotionSessionId=${id}`)
    // flashProductRelation?flashPromotionId=102&flashPromotionSessionId=20
}
</script>

<style scoped>
:deep(.cell) {
    text-align: center;
}



.dataListBox {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin: 20px 0;
    padding: 14px;

    .TicketsLeft {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

}
</style>